<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gallery</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/gallery.style.css"/>
</head>
<body>

<header class="am-text-center">
    <div class="header-desc">
        <h1>Gallery</h1>
        <p>以时间轴效果显示，使用了画廊组件</p>
    </div>
</header>


<div class="gallery am-container">
    <span id="vertical-line"></span>

    <!-- 将图片列表放入pic-list类里面 -->
    <div class="pic-list">
        <div class="list-time-box">
            <!-- 这里是时间轴的时间 -->
            <p class="list-time">2375-09</p>
            <span class="list-dot"></span>
        </div>
        <ul data-am-widget="gallery" class="am-gallery am-gallery-default" data-am-gallery="{ pureview: true }">
            <li>
                <div class="am-gallery-item">
                    <a href="http://s.amazeui.org/media/i/demos/bing-1.jpg"
                       class="">
                        <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg"
                             alt="远方 有一个地方 那里种有我们的梦想" />
                        <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                        <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                </div>
            </li>
            <li>
                <div class="am-gallery-item">
                    <a href="http://s.amazeui.org/media/i/demos/bing-2.jpg"
                       class="">
                        <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg"
                             alt="某天 也许会相遇 相遇在这个好地方" />
                        <h3 class="am-gallery-title">某天 也许会相遇 相遇在这个好地方</h3>
                        <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                </div>
            </li>
            <li>
                <div class="am-gallery-item">
                    <a href="http://s.amazeui.org/media/i/demos/bing-3.jpg"
                       class="">
                        <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg"
                             alt="不要太担心 只因为我相信" />
                        <h3 class="am-gallery-title">不要太担心 只因为我相信</h3>
                        <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                </div>
            </li>
        </ul>
    </div>

    <!-- 将图片列表放入pic-list类里面 -->
    <div class="pic-list">
        <div class="list-time-box">
            <!-- 这里是时间轴的时间 -->
            <p class="list-time">2375-09</p>
            <span class="list-dot"></span>
        </div>
        <ul data-am-widget="gallery" class="am-gallery am-gallery-default" data-am-gallery="{ pureview: true }">
            <li>
                <div class="am-gallery-item">
                    <a href="http://s.amazeui.org/media/i/demos/bing-4.jpg"
                       class="">
                        <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg"
                             alt="终会走过这条遥远的道路" />
                        <h3 class="am-gallery-title">终会走过这条遥远的道路</h3>
                        <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                </div>
            </li>

        </ul>
    </div>
</div>


<footer>
    <p>gallery page template<br/>
        <small>© Copyright XXX. Designed by Misic.</small>
    </p>
</footer>






<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>

<!--[if lt IE 9]>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->


</body>
</html>